<html>
<head>
    <title>ReadyMap WebGL</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

    <script type="text/javascript" src="../js/jquery/jquery-1.4.2.js"></script>
    <script type="text/javascript" src="../js/jquery/jquery-ui-1.8.2.custom.min.js"></script>
    <script type="text/javascript" src="../build/readymap-debug-0.0.1.js"></script>

    <link href="demo.css" rel="Stylesheet" type="text/css"></link>
    <link href="../css/ui-lightness/jquery.ui.all.css" rel="stylesheet" type="text/css"></link>
    <link href="../css/readymap.css" rel="Stylesheet" type="text/css"></link>

    <script type="text/javascript">

        var mapView;

        ReadyMap.init(function() {
        
            // create a map model with no underwater elevation
            var map = new ReadyMap.Map({
                minElevation: 0.0
            });

            map.addImageLayer(new ReadyMap.TMSImageLayer({
                name: "Landsat",
                url: "http://readymap.org/readymap/tiles/1.0.0/22/"
            }));

            map.addElevationLayer(new ReadyMap.TMSElevationLayer({
                name: "Elevation",
                url: "http://readymap.org/readymap/tiles/1.0.0/9",
                args: "json=true"
            }));

            // create a view tied to a page element:
            var size = ReadyMap.getWindowSize();
            var headerHeight = jQuery('#header').height();
            size.h -= headerHeight;

            mapView = new ReadyMap.MapView(
                "3DView", size, map,
                { verticalScale: 3.0 }
            );

            //Add some controls
            var zoom = new ReadyMap.Controls.Zoom(mapView, "ViewContainer");
            var pan = new ReadyMap.Controls.Pan(mapView, "ViewContainer");

            // display the Lat/Long:
            mapView.addFrameEndCallback(function() {
                var viewMatrix = mapView.viewer.view.getViewMatrix();
                viewMatrix = osg.Matrix.inverse(viewMatrix);
                var eye = [];
                osg.Matrix.getTrans(viewMatrix, eye);
                var lla = map.profile.ellipsoid.ecef2lla(eye);
                lla[0] = Math.rad2deg(lla[0]);
                lla[1] = Math.rad2deg(lla[1]);
                jQuery("#Coords").html(
                    "Lat: " + lla[1].toFixed(2) + "\u00B0" + "  Long = " + lla[0].toFixed(2) + "\u00B0" + "<br/>" +
                    "Azim: " + Math.rad2deg(mapView.viewer.manipulator.localAzim).toFixed(1) + "\u00B0" +
                    "  Pitch:" + Math.rad2deg(mapView.viewer.manipulator.localPitch).toFixed(1) + "\u00B0" + "<br/>" +
                    "Tiles: " + map.drawListSize);
            });

            // elevation scale slider:
            jQuery('#ElevationSlider').slider({
                min: 1.0,
                max: 25.0,
                value: mapView.verticalScale,
                step: 0.1,
                slide: function(event, ui) {
                    mapView.setVerticalScale(ui.value);
                }
            });
        });

</script>

</head>
<body>
    <div id="header">
        <a href="http://pelicanmapping.com" border="0">
            <img id="logo" align="right" height="50" src="http://pelicanmapping.com/wp-content/uploads/2011/02/pelican-logo-262x93-light.png" /></a>
        <p>
            ReadyMap / WebGL :: <a href="index.html">demos</a> :: <a href="http://godzi.org">wiki</a>
            :: <a href="http://github.com/gwaldron/godzi-webgl">github</a> :: <a href="http://twitter.com/#!/pelicanmapping">
                twitter</a>
        </p>
    </div>
    <div id="ViewContainer">
        <canvas id="3DView"></canvas>
    </div>
    <div id="Help">
        <ul>
            <li>drag to pan</li>
            <li>wheel to zoom</li>
            <li>shift-drag to rotate</li>
            <li><a href="#" onclick="mapView.home();">reset view</a></li>
        </ul>
        <p>Elevation scale:</p>
        <div id="ElevationSlider">
        </div>
    </div>
    <div id="Coords">
    </div>
</body>
</html>
